<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>实习岗位详情</title>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/internship-detail.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
    <div class="app-container">
        <!-- 页面头部 -->
        <header class="page-header">
            <div class="back-button">
                <i class="bi bi-arrow-left"></i>
            </div>
            <h1 class="title">实习详情</h1>
            <div class="header-actions">
                <button class="share-button">
                    <i class="bi bi-share"></i>
                </button>
                <button class="favorite-btn">
                    <i class="bi bi-heart"></i> 收藏
                </button>
            </div>
        </header>

        <!-- 主内容区域 -->
        <div class="main-content">
            <!-- 工作头部信息 -->
            <div class="job-header">
                <div class="company-banner">
                    <img src="../img/company-banner.jpg" alt="公司横幅" class="company-banner-img">
                </div>
                <div class="job-info-header">
                    <div class="company-info">
                        <img src="../img/company-logo.jpg" alt="公司标志" class="company-logo">
                        <div class="company-text">
                            <h3 class="company-name">科技互联网公司</h3>
                            <p class="company-meta">互联网 · 500-2000人 · 北京</p>
                        </div>
                    </div>
                    <div class="job-title-section">
                        <h1 class="job-title">前端开发实习生</h1>
                        <div class="job-tags">
                            <span class="tag">前端开发</span>
                            <span class="tag">Vue.js</span>
                            <span class="tag">React</span>
                        </div>
                    </div>
                </div>
                <!-- 职位基本信息 -->
                <div class="job-meta">
                    <div class="meta-item salary">
                        <i class="bi bi-cash"></i>
                        <div>
                            <p class="meta-label">薪资</p>
                            <p><span>300-400元/天</span></p>
                        </div>
                    </div>
                    <div class="meta-item location">
                        <i class="bi bi-geo-alt"></i>
                        <div>
                            <p class="meta-label">地点</p>
                            <p><span>北京市 · 海淀区</span></p>
                        </div>
                    </div>
                    <div class="meta-item duration">
                        <i class="bi bi-calendar-week"></i>
                        <div>
                            <p class="meta-label">实习周期</p>
                            <p><span>3-6个月</span></p>
                        </div>
                    </div>
                    <div class="meta-item workdays">
                        <i class="bi bi-clock"></i>
                        <div>
                            <p class="meta-label">工作时间</p>
                            <p><span>5天/周</span></p>
                        </div>
                    </div>
                    <div class="meta-item education">
                        <i class="bi bi-mortarboard"></i>
                        <div>
                            <p class="meta-label">学历要求</p>
                            <p><span>本科及以上</span></p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 职位亮点 -->
            <div class="content-card">
                <div class="section-title">
                    <i class="bi bi-stars"></i>
                    <h2>职位亮点</h2>
                </div>
                <ul class="highlights-list">
                    <li><span class="highlight-icon"><i class="fa fa-check-circle"></i></span>知名互联网企业</li>
                    <li><span class="highlight-icon"><i class="fa fa-check-circle"></i></span>弹性工作时间</li>
                    <li><span class="highlight-icon"><i class="fa fa-check-circle"></i></span>提供免费午餐</li>
                    <li><span class="highlight-icon"><i class="fa fa-check-circle"></i></span>实习转正机会</li>
                </ul>
            </div>

            <!-- 职位描述 -->
            <div class="content-card">
                <div class="section-title">
                    <i class="bi bi-file-text"></i>
                    <h2>职位描述</h2>
                </div>
                <div class="position-content">
                    <h3>岗位职责</h3>
                    <ul class="responsibilities-list">
                        <li><span class="number">1.</span> 参与公司产品的前端开发和维护工作</li>
                        <li><span class="number">2.</span> 配合后端工程师完成接口对接</li>
                        <li><span class="number">3.</span> 优化网站前端性能，提升用户体验</li>
                        <li><span class="number">4.</span> 参与前端技术调研和技术选型</li>
                        <li><span class="number">5.</span> 完成导师和上级安排的其他任务</li>
                    </ul>
                    
                    <h3>岗位要求</h3>
                    <ul class="requirements-list">
                        <li><span class="number">1.</span> 计算机相关专业本科及以上学历</li>
                        <li><span class="number">2.</span> 熟悉HTML、CSS、JavaScript等前端技术</li>
                        <li><span class="number">3.</span> 了解Vue.js、React等主流前端框架</li>
                        <li><span class="number">4.</span> 有良好的代码编写习惯和问题解决能力</li>
                        <li><span class="number">5.</span> 有责任心、学习能力强、团队协作意识好</li>
                    </ul>
                </div>
            </div>

            <!-- 岗位福利 -->
            <div class="content-card">
                <div class="section-title">
                    <i class="bi bi-gift"></i>
                    <h2>岗位福利</h2>
                </div>
                <ul class="benefits-list">
                    <li><span class="benefit-icon"><i class="fa fa-gift"></i></span>有竞争力的实习薪资和补贴</li>
                    <li><span class="benefit-icon"><i class="fa fa-gift"></i></span>灵活的工作时间安排</li>
                    <li><span class="benefit-icon"><i class="fa fa-gift"></i></span>优秀者可获得正式工作机会</li>
                    <li><span class="benefit-icon"><i class="fa fa-gift"></i></span>与行业专家共事，快速成长</li>
                    <li><span class="benefit-icon"><i class="fa fa-gift"></i></span>舒适的办公环境和团队氛围</li>
                </ul>
            </div>

            <!-- 公司介绍 -->
            <div class="content-card">
                <div class="section-title">
                    <i class="bi bi-building"></i>
                    <h2>公司介绍</h2>
                </div>
                <div class="company-profile">
                    <div class="company-basic-info">
                        <div class="info-item">
                            <span class="info-label">所属行业：</span>
                            <span class="info-value">互联网/IT</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">公司规模：</span>
                            <span class="info-value">500-2000人</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">成立时间：</span>
                            <span class="info-value">2010年</span>
                        </div>
                    </div>
                    <div class="company-intro">
                        <p>我们是一家以技术创新为驱动的互联网公司，致力于为用户提供优质的数字化服务解决方案。公司拥有完善的人才培养体系，为员工提供广阔的发展空间和具有竞争力的薪酬福利。</p>
                    </div>
                    <div class="company-culture">
                        <p><strong>企业文化：</strong>开放、创新、包容、共赢</p>
                    </div>
                </div>
            </div>

            <!-- 职位信息 -->
            <div class="content-card">
                <div class="section-title">
                    <i class="bi bi-info-circle"></i>
                    <h2>职位信息</h2>
                </div>
                <div class="job-details">
                    <div class="info-item">
                        <span class="info-label">发布日期：</span>
                        <span class="info-value post-date">2023-05-15</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">截止日期：</span>
                        <span class="info-value deadline-date">2023-06-30</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">浏览次数：</span>
                        <span class="info-value views-count">1258</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">申请人数：</span>
                        <span class="info-value applications-count">86</span>
                    </div>
                </div>
            </div>

            <!-- 相关职位 -->
            <div class="content-card">
                <div class="section-title">
                    <i class="bi bi-briefcase"></i>
                    <h2>相关职位</h2>
                </div>
                <div class="related-jobs">
                    <!-- 相关职位将通过JS动态加载 -->
                </div>
            </div>
        </div>

        <!-- 底部申请按钮 -->
        <div class="bottom-action">
            <button class="apply-btn">立即申请</button>
        </div>
        
        <!-- 底部导航栏 -->
        <nav class="tab-bar">
            <a href="../index.html" class="tab-item">
                <i class="bi bi-house"></i>
                <span>首页</span>
            </a>
            <a href="discover.html" class="tab-item">
                <i class="bi bi-compass"></i>
                <span>发现</span>
            </a>
            <a href="activities.html" class="tab-item">
                <i class="bi bi-calendar-event"></i>
                <span>活动</span>
            </a>
            <a href="profile.html" class="tab-item">
                <i class="bi bi-person"></i>
                <span>我的</span>
            </a>
        </nav>
    </div>

    <!-- 申请模态框 -->
    <div id="apply-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>申请职位</h2>
                <button class="modal-close"><i class="bi bi-x-lg"></i></button>
            </div>
            <form class="apply-form">
                <div class="form-group">
                    <label for="name">姓名</label>
                    <input type="text" id="name" required placeholder="请输入您的姓名">
                </div>
                <div class="form-group">
                    <label for="phone">手机号</label>
                    <input type="tel" id="phone" required placeholder="请输入您的手机号">
                </div>
                <div class="form-group">
                    <label for="email">邮箱</label>
                    <input type="email" id="email" required placeholder="请输入您的邮箱">
                </div>
                <div class="form-group">
                    <label for="school">学校</label>
                    <input type="text" id="school" required placeholder="请输入您的学校">
                </div>
                <div class="form-group">
                    <label for="major">专业</label>
                    <input type="text" id="major" required placeholder="请输入您的专业">
                </div>
                <div class="form-group">
                    <label for="graduation">预计毕业时间</label>
                    <select id="graduation" required>
                        <option value="">请选择毕业年份</option>
                        <option value="2023">2023年</option>
                        <option value="2024">2024年</option>
                        <option value="2025">2025年</option>
                        <option value="2026">2026年</option>
                        <option value="2027">2027年</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="resume">简历上传</label>
                    <div class="resume-upload">
                        <input type="file" id="resume" accept=".pdf,.doc,.docx">
                        <label for="resume" class="upload-btn">选择文件</label>
                        <span class="file-name"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label for="introduction">自我介绍</label>
                    <textarea id="introduction" rows="4" placeholder="请简要介绍自己的技能和经验..."></textarea>
                </div>
                <button type="submit" class="submit-btn">提交申请</button>
            </form>
        </div>
    </div>

    <!-- 加载指示器 -->
    <div class="loading-spinner">
        <div class="spinner-inner"></div>
    </div>

    <!-- JS脚本 -->
    <script src="../js/internship-detail.js"></script>
</body>
</html> 